<template>
  <div class="gov-application-materials">
    <div class="header">
      <el-button v-if="handleType !== 'scan'" type="success" size="mini" @click="add">新增办理环节</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="businessTacheName" show-overflow-tooltip label="办理环节"></el-table-column>
        <el-table-column prop="tacheTimeValue" show-overflow-tooltip label="办理时限"></el-table-column>
        <el-table-column prop="termUnitName" show-overflow-tooltip label="时限单位"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-popconfirm @confirm="delHandle(scope.$index)" title="这是一段内容确定删除吗？">
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <add :visible.sync="visible.add" @addSuccessHandle="addSuccessHandle" :businessTache="businessTache" />
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import { queryDict } from '@/api/common';
  import add from './add';
  export default {
    components: { add },
    props: {
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String
      },
      selected: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data() {
      return {
        tableData: [],
        businessTache: [],
        termUnit: [],
        visible: {
          add: false
        }
      };
    },
    watch: {
      selected: {
        handler(val) {
          if (val && val.length > 0) {
            this.tableData = JSON.parse(JSON.stringify(val)) || [];
            this.setName();
          }
        }
      }
    },
    computed: {},
    methods: {
      add() {
        this.visible.add = true;
      },
      addSuccessHandle(data) {
        this.tableData.push(data);
        this.setName();
      },
      delHandle(index) {
        this.tableData.splice(index, 1);
      },
      async getBusinessTache() {
        return axios.get('/api/v1/business/link/list');
      },
      async getTermUnit() {
        return queryDict({ dict: 'term_unit' });
      },
      // 获取form数据,isValid是否需要验证，暂存不验证，提交验证
      getFormData(isValid) {
        // 验证
        let valid = true;

        if (isValid && this.tableData.length === 0) {
          valid = false;
        }

        this.tableData.forEach((e) => {
          e.tacheTimeValue = parseInt(e.tacheTimeValue);
          delete e.businessTacheName;
          delete e.termUnitName;
        });

        return {
          valid,
          data: this.tableData
        };
      },
      setName() {
        const list = JSON.parse(JSON.stringify(this.tableData)) || [];
        list.forEach((i) => {
          let item;
          item = this.businessTache.find((j) => {
            return j.item_value === i.businessTacheId;
          });
          i.businessTacheName = item.item_text;

          item = this.termUnit.find((j) => {
            return j.item_value === i.tacheTimeUnit;
          });
          i.termUnitName = item.item_text;
        });
        this.tableData = list;
      },
      async init() {
        const [res1, res2] = await axios.all([this.getBusinessTache(), this.getTermUnit()]);
        const { data: data1 } = res1;
        const { data: data2 } = res2;
        if (data1.success && data2.success) {
          const list = data1.result || [];
          this.businessTache = list.map((e) => {
            return {
              item_value: e.businessTacheId,
              item_text: e.businessTacheName
            };
          });
          this.termUnit = data2.result || [];

          this.setName();
        }
      },
      resetField() {
        this.tableData = [];
      }
    },
    created() {},
    mounted() {
      this.init();
    }
  };
</script>
<style lang="scss">
  .gov-application-materials {
    .header {
      margin-bottom: 20px;
    }
  }
</style>
